<template>
   <Container class="patrol-detail" v-if="this.$route.query.id">
    <div class="container-header title title-center" slot="header">门店拜访统计详情
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <div :bordered="false" dis-hover class="ivu-mt bg-light mt pt0">
      <div class="container-title">基本信息</div>
      <Form :label-width="120">
        <Row>
          <Col span="6">
            <FormItem label="门店名称：">{{detail.storeName}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="科室：">{{detail.officeName}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="地区：">{{detail.depName}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="经销商：">{{detail.distributorName}}</FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="门店类型：">{{detail.storeTypeName}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="门店维护人：">{{detail.storeMaintainerName}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="打卡人：">{{detail.operatorName}}</FormItem>
          </Col>
        </Row>
        <FormItem label="门店联系人：">{{detail.ownerName}}</FormItem>
        <FormItem label="门店登录手机：">{{detail.storePhone}}</FormItem>
        <FormItem label="经营品牌：">{{detail.brandName}}</FormItem>
        <FormItem label="门店签约地址：">{{detail.address}}</FormItem>
        <FormItem label="签到定位：">{{detail.enterLocation}}</FormItem>
        <FormItem label="离店定位：">{{detail.leaveLocation}}</FormItem>
        <Row>
          <Col span="6">
            <FormItem label="签到时间：">{{detail.enterTime}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="离店时间：">{{detail.leaveTime}}</FormItem>
          </Col>
          <Col span="6">
            <FormItem label="到店时长：">{{detail.durationOfStay}}</FormItem>
          </Col>
        </Row>
        <FormItem label="拜访记录：">{{detail.visitLog}}</FormItem>
        <FormItem label="门头照：" v-if="detail.headImageUrl">
          <a :href="detail.headImageUrl" target="_blank"><img class="info-img w50" :src="detail.headImageUrl" /></a>
        </FormItem>
        <FormItem label="内部照：" v-if="detail.innerImageUrls">
          <ul class="fill-img">
            <li v-for="(item, index) of detail.innerImageUrls" :key="index">
              <a :href="item" target="_blank"><img class="info-img mr" :src="item" /></a>
            </li>
          </ul>
        </FormItem>
      </Form>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
</Container>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      detail: {
        id: '',
        storeName: '',
        distributorName: '',
        depName: '',  
        officeName: '',
        operatorName: '',
        storeMaintainerName: '',
        enterTime: '',
        leaveTime: '',
        durationOfStay: '',
        storeTypeName: '',
        storePhone: '',
        brandName: '',
        ownerName: '',
        address: '',
        enterLocation: '',
        leaveLocation: '',
        visitLog: '',
        headImageUrl: '',
        innerImageUrls: []
      },
      status: 'pass'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // this.status = 'loading'
      this.$ajaxGet(`/salesman/inspection/store_visit/details/${this.id}`).then(res => {
        if (res) {
          this.detail = {
            id: res.id,
            storeName: res.storeName,
            distributorName: res.distributorName,
            depName: res.depName,  
            officeName: res.officeName,
            operatorName: res.operatorName,
            storeMaintainerName: res.storeMaintainerName,
            enterTime: res.enterTime,
            leaveTime: res.leaveTime,
            durationOfStay: res.durationOfStay,
            storeTypeName: res.storeTypeName,
            storePhone: res.storePhone,
            brandName: res.brandName,
            ownerName: res.ownerName,
            address: res.address,
            enterLocation: res.enterLocation,
            leaveLocation: res.leaveLocation,
            visitLog: res.visitLog,
            headImageUrl: res.headImageUrl,
            innerImageUrls: res.innerImageUrls
          }
        } else {
          this.$Notice.info({
            title: '该巡店信息不存在'
          })
        }
        // this.status = 'pass'
      })
    }
  }
}
</script>